<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div>
    <use-touch class="h-full p-2 bg-gray-50" @touch="handleMove" v-bind="config">
      <template #default="{ focus }">
        <use-label text="参数配置：" />
        <a-form :model="config" auto-label-width>
          <a-form-item label="按键触发">
            <a-radio-group type="button" v-model="config.useKbd">
              <a-radio value="keyup">键盘抬起触发</a-radio>
              <a-radio value="keydown">键盘按下触发</a-radio>
              <a-radio value="">键盘不触发</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="移动端">
            <a-radio-group type="button" v-model="config.useMoveEvent">
              <a-radio :value="true">滑动过程触发</a-radio>
              <a-radio :value="false">滑动结束触发</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="最小触发距离">
            <a-input-number
              v-model="config.shortest"
              placeholder="shortest"
              class="input-demo"
              :style="{ width: '6rem' }"
              :min="10"
              :max="200"
              :step="10"
            />
          </a-form-item>
        </a-form>
        <use-label text="传参：" />
        <div class="h-32">
          <use-code :model-value="JSON.stringify(config, null, 2)" disabled />
        </div>
        <use-label text="pc焦点：（判断暂时有点小问题...）" />
        <a-tag :color="focus ? 'arcoblue' : ''">{{ focus ? '已聚焦' : '无聚焦' }}</a-tag>
      </template>
    </use-touch>
  </div>
</template>

<script lang="ts" setup>
const config = reactive<{
  useKbd: any
  useMoveEvent: boolean
  shortest: number
}>({
  useKbd: 'keyup',
  useMoveEvent: true,
  shortest: 50,
})

function handleMove(e: string) {
  Message.clear()
  Message.info(`move-${e}`)
}
</script>
